<template>
  <div class="area_box">
    <AreaTop></AreaTop>
    <div class="model_main flex">
      <div class="flexC flex3" style="padding-right: 2rem;">
        <!-- 下拉菜单 -->
        <div style="position: relative;z-index: 2;">
          <div class=" basis_aaxz textC font_s20 ishover cursor" @click="switchmap()">
            {{ cityName }}
            <img src="@/assets/img/ouhai/3.png" alt="" style="position: absolute;right: 1.5rem;top: 1.5rem" />
          </div>
          <div class="flexC category font_s20 textC JustifyContentSA cursor" v-if="category">
            <p class="ishover" @click="switchmap(0)">温州市</p>
            <p class="ishover" @click="switchmap(1, '330324000000')">永嘉县</p>
            <p class="ishover" @click="switchmap(2, '330382000000')">乐清市</p>
            <p class="ishover" @click="switchmap(3, '330302000000')">鹿城区</p>
            <p class="ishover" @click="switchmap(4, '330304000000')">瓯海区</p>
            <p class="ishover" @click="switchmap(5, '330303000000')">龙湾区</p>
            <p class="ishover" @click="switchmap(6, '330305000000')">洞头区</p>
            <p class="ishover" @click="switchmap(7, '330328000000')">文成县</p>
            <p class="ishover" @click="switchmap(8, '330381000000')">瑞安市</p>
            <p class="ishover" @click="switchmap(9, '330326000000')">平阳县</p>
            <p class="ishover" @click="switchmap(10, '330329000000')">泰顺县</p>
            <p class="ishover" @click="switchmap(11, '330327000000')">苍南县</p>
          </div>
        </div>
        <AreaMapCen :query="query" ref="mychild"
                    :cityType="cityType" :name=cityName :cityCode = cityCode></AreaMapCen>
        <AreaBottom :query="query" :cityCode = cityCode ref="mychildBottom"></AreaBottom>
      </div>
      <AreaRight :query="query" :cityCode = cityCode ref="mychild"></AreaRight>
    </div>
  </div>
</template>

<script>
import AreaTop from './components/AreaTop'
import AreaRight from './components/AreaRight'
import AreaMapCen from './components/AreaMapCen'
import AreaBottom from './components/AreaBottom'
export default {
  name: 'AreaComponent',
  components: { AreaBottom, AreaMapCen, AreaRight, AreaTop },
  data () {
    return {
      category: false,
      cityCode: '',
      cityType: '',
      cityName: '',
      qxCode: '',
      query: [],
      dataList: []
    }
  },
  created () {
    this.getParams()
    this.handle()
  },
  methods: {
    getParams () {
      let routerParams = this.$route.params.cityTypeKey
      let routerParams2 = this.$route.params.cityTitleKey
      let routerParams3 = this.$route.params.cityCodeKey
      this.cityType = routerParams
      this.cityName = routerParams2
      this.cityCode = routerParams3
      if (this.cityType == null || this.cityType === undefined) {
        this.cityType = localStorage.getItem('cityIndex')
        console.log('AreaComponent缓存cityTypeLocal：', this.cityType)
      }
      if (this.cityName == null || this.cityName === undefined) {
        this.cityName = localStorage.getItem('cityName')
        console.log('AreaComponent缓存cityNameLocal：', this.cityName)
      }
    },
    handle () {
      this.$http.post(this.$api.Hqlrsl.hqlrsl, true).then(result => {
        this.dataList = result.data.response.countTotalRegionDoctor
        // console.log('12.获取老人数量(会按照地区自动分类)', this.dataList);
      })
    },
    switchmap (index, item) {
      this.category = !this.category
      if (index === 0) {
        this.$router.go(-1)
      } else if (index === 1) {
        this.cityName = '永嘉县'
        this.cityType = 1
        this.cityCode = item
        this.$refs.mychild.childFun(item)
        this.$refs.mychildBottom.childBottomFun(item)
        localStorage.setItem('cityIndex', this.cityType)
        localStorage.setItem('cityName', this.cityName)
        localStorage.setItem('cityCode', this.cityCode)
      } else if (index === 2) {
        this.cityName = '乐清市'
        this.cityType = 2
        this.cityCode = item
        this.$refs.mychild.childFun(item)
        this.$refs.mychildBottom.childBottomFun(item)
      } else if (index === 3) {
        this.cityName = '鹿城区'
        this.cityType = 3
        this.cityCode = item
        this.$refs.mychild.childFun(item)
        this.$refs.mychildBottom.childBottomFun(item)
      } else if (index === 4) {
        this.cityName = '瓯海区';
        this.cityType = 4;
        this.cityCode = item
        this.$refs.mychild.childFun(item)
        this.$refs.mychildBottom.childBottomFun(item)
      } else if (index === 5) {
        this.cityName = '龙湾区';
        this.cityType = 5;
        this.cityCode = item
        this.$refs.mychild.childFun(item)
        this.$refs.mychildBottom.childBottomFun(item)
      } else if (index === 6) {
        this.cityName = '洞头区';
        this.cityType = 6;
        this.cityCode = item
        this.$refs.mychild.childFun(item)
        this.$refs.mychildBottom.childBottomFun(item)
      } else if (index === 7) {
        this.cityName = '文成县';
        this.cityType = 7;
        this.cityCode = item
        this.$refs.mychild.childFun(item)
        this.$refs.mychildBottom.childBottomFun(item)
      } else if (index === 8) {
        this.cityName = '瑞安市';
        this.cityType = 8;
        this.cityCode = item
        this.$refs.mychild.childFun(item)
        this.$refs.mychildBottom.childBottomFun(item)
      } else if (index === 9) {
        this.cityName = '平阳县';
        this.cityType = 9;
        this.cityCode = item
        this.$refs.mychild.childFun(item)
        this.$refs.mychildBottom.childBottomFun(item)
      } else if (index === 10) {
        this.cityName = '泰顺县';
        this.cityType = 10;
        this.cityCode = item
        this.$refs.mychild.childFun(item)
        this.$refs.mychildBottom.childBottomFun(item)
      } else if (index === 11) {
        this.cityName = '苍南县';
        this.cityType = 11;
        this.cityCode = item
        this.$refs.mychild.childFun(item)
        this.$refs.mychildBottom.childBottomFun(item)
      }
      localStorage.setItem('cityIndex', this.cityType)
      localStorage.setItem('cityName', this.cityName)
      localStorage.setItem('cityCode', this.cityCode)
    }
  },
  watch: {
    $route: 'getParams'
  }
}
</script>

<style scoped lang="scss">
.area_box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background: url(../../assets/img/dbg/background.png) no-repeat;
  background-size: 100% 100%;
  .area_content_box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 5rem;
    left: 0;
  }
  .model_main {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    padding: 5.5rem 2rem 2rem 2rem;
    .ishover:hover {
      color: #33ebfe;
      font-size: 1.375rem;
    }
    .basis_aaxz {
      width: 12.125rem;
      height: 3.75rem;
      background: url(../../assets/img/home/13.png);
      background-size: 100% 100%;
      color: white;
      line-height: 3.75rem;
      position: absolute;
      left: 1rem;
    }
    .category {
      width: 11.125rem;
      height: 28rem;
      position: absolute;
      left: 1.5rem;
      top: 3rem;
      color: white;
      margin-top: 1rem;
      line-height: 2rem;
      padding: 0.5rem 0;
      background: url(../../assets/img/home/20.png);
      background-size: 100% 100%;
    }
  }
}
</style>
